<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适配 移动设备 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学成在线首页</title>
    <link rel="stylesheet" href="./css/style.css"> <!-- 加载CSS文件 -->
</head>

<body>

<!-- 4. box核心内容区域开始 -->
<div class="版面 版心居中">
    <div class="版面-标题">
        <h3>精品推荐</h3>
        <a href="#">查看全部</a>
    </div>
    <div class="版面-展示">
        <ul>
            <script>
                // li标签 部分的代码, 使用JS循环的方式渲染
                // 声明数组, 存放数据
                let 数组_渲染要的数据 = [
                    {
                        路径: 'images/course01.png',
                        标题: 'Think PHP 5.0 博客系统实战项目演练',
                        数: 1125
                    },
                    {
                        路径: 'images/course02.png',
                        标题: 'Android 网络动态图片加载实战',
                        数: 357
                    },
                    {
                        路径: 'images/course03.png',
                        标题: 'Angular2 大前端商城实战项目演练',
                        数: 22250
                    },
                    {
                        路径: 'images/course04.png',
                        标题: 'Android APP 实战项目演练',
                        数: 389
                    },
                    {
                        路径: 'images/course05.png',
                        标题: 'UGUI 源码深度分析案例',
                        数: 124
                    },
                    {
                        路径: 'images/course06.png',
                        标题: 'Kami2首页界面切换效果实战演练',
                        数: 432
                    },
                    {
                        路径: 'images/course07.png',
                        标题: 'UNITY 从入门到精通实战案例',
                        数: 888
                    },
                    {
                        路径: 'images/course08.png',
                        标题: 'Cocos 深度学习你不会错过的实战',
                        数: 590
                    },
                ]
                // 循环读取数组数据, 打印渲染
                for (let i = 0; i < 数组_渲染要的数据.length; i++) { //血泪啊, .length 一定要记得的啊~~~
                    document.write(`
                         <li>
                            <a href="#">
                                <img src=${数组_渲染要的数据[i].路径} alt="">
                                <h4>
                                    ${数组_渲染要的数据[i].标题}
                                </h4>
                                <div class="信息">
                                    <span>高级</span> • <span>${数组_渲染要的数据[i].数}人在学习</span>
                                </div>
                            </a>
                        </li>
                    `)
                }
            </script>
        </ul>
    </div>
</div>


</body>

</html>